<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\..\node_modules\vue\dist\vue.js"></script>
    <script src="..\..\node_modules\vue-router\dist\vue-router.js"></script>
</head>
<body>
<div id="app">
    <p>params</p>
    <input v-model="pid">
    <button v-on:click="p_push">p_push</button>
    <router-view></router-view>
</div>
</body>
<script type="application/javascript">
    const P = {
        props:['id','sid'],
        template:
            `
<div>
p id from params: {{$route.params.id}}
<br>
p sid from params: {{$route.params.sid}}
<br>
p id from props: {{this.id}}
<br>
p sid from props: {{this.sid}}
</div>
`
    };

    const routes = [
        { path: '/p/:id/:sid',  component: P  }
    ];

    const router = new VueRouter({
        routes:[
            {
                path: '/p/:id/:sid',
                name:'p' ,
                component: P,
                //以下三种pros用法。
                // props: true
                // props:{id:2 , sid:true}
                props:routes => (
                    {id:1,sid:2}
                )
            }
        ]
    });

    const app = new Vue({
        router,
        data:{
            pid:'1'
        },
        methods:{
            //使用path后，忽略params。
            p_push:function (){
                this.$router.push(
                    { name:'p',params:{id:this.pid,sid:100}} ,
                    function(r){
                        console.log("complete");},
                    function (r){
                        console.log("abort");
                    }
                );
            }
        }
    }).$mount('#app');

</script>
</html>